<script setup lang="ts">
import { ref, onMounted } from 'vue';
import LeftTitle from '../../components/LeftTitle.vue';
import { getDutyApi } from '../../api/index';

// 定义类型
interface typeData {
    [key: string]: any
}

// 值班数据
const dutyData: typeData = ref([]);
// let arr;

onMounted(async () => {
    // 数据格式
    // eegs_dutyContent:"三号门"
    // eegs_id:0
    // eegs_name:"甲三"
    // eegs_phone:"136****4412"
    // eegs_time:"戎六"
    const res = await getDutyApi();
    dutyData.value = res.data.data.result[0];
    // console.log(res.data.data.result[0], '111111111111');

    dutyData.value.forEach((item: any) => {
        // 删除eegs_id属性
        delete item.eegs_id;
        //对象转化为数组
        // arr = Object.values(item); 
    });
    // console.log(arr, '7777777777');
    // console.log(dutyData.value, '2222222222222');
});

const config = {
    // 表头数据
    header: ['姓名', '时间', '值班内容', '联系电话'],
    // 表数据
    data: [
        ["甲三", "戎六", "三号门", "136****4412"],
        ["甲三", "戎六", "三号门", "136****4412"],
        ["甲三", "戎六", "三号门", "136****4412"],
        ["甲三", "戎六", "三号门", "136****4412"],
        ["甲三", "戎六", "三号门", "136****4412"],
    ],
    // 显示行号
    index: true,
    // 列宽度
    columnWidth: [45],
    // 列对齐方式
    align: ['center'],
    // 轮播方式
    carousel: 'single',
    // 表行数
    rowNum: [3],
    // 表头背景色
    headerBGC: ["transparent"],
    // 悬浮暂停轮播
    hoverPause: true,
}
</script>

<template>
    <div class="container">
        <LeftTitle title="值班情况"></LeftTitle>

        <div class="duty-box">
            <dv-scroll-board :config="config" class="duty-item" />
        </div>
        <!-- <div class="duty-box">
            <div>
                <p>#</p>
                <p>姓名</p>
                <p>时间</p>
                <p>值班内容</p>
                <p>联系电话</p>
            </div>

            <li v-for="(item, index) in dutyData" :key="index">
                <p>{{ item.eegs_id + 1 }}</p>
                <p>{{ item.eegs_name }}</p>
                <p>{{ item.eegs_time }}</p>
                <p>{{ item.eegs_dutyContent }}</p>
                <p class="phone">{{ item.eegs_phone }}</p>
            </li>
        </div> -->
    </div>
</template>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 32%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .duty-box {
        flex: 1;
        margin-top: 2%;
        // width: 100%;
        // height: 78%;
        background-color: #0C1D5F;

        .duty-item {
            width: 100%;
            height: 100%;
        }
    }

    // .duty-box {
    //     width: 100%;
    //     height: 79%;
    //     font-size: 12px;
    //     color: #DFE1E9;
    //     background-color: #0C1D5F;
    //     overflow: hidden; // 111111111
    //     display: flex;
    //     flex-direction: column;
    //     align-items: center;

    //     >div {
    //         width: 100%;
    //         height: 25%;
    //         display: flex;
    //         align-items: center;
    //         justify-content: space-evenly;

    //         >p {
    //             width: 17%;
    //             height: 100%;
    //             display: flex;
    //             align-items: center;
    //             justify-content: center;
    //         }

    //         >p:nth-child(1) {
    //             width: 5%;
    //         }
    //     }

    //     >li {
    //         width: 100%;
    //         height: 25%;
    //         display: flex;
    //         align-items: center;
    //         justify-content: space-evenly;

    //         >p {
    //             width: 17%;
    //             height: 100%;
    //             display: flex;
    //             align-items: center;
    //             justify-content: center;
    //         }

    //         >p:nth-child(1) {
    //             width: 5%;
    //         }

    //         .phone {
    //             white-space: nowrap;
    //             overflow: hidden;
    //             text-overflow: ellipsis;
    //             display: inline-block;
    //             line-height: 350%;
    //         }
    //     }

    //     >li:nth-of-type(odd) {
    //         background-color: #0A2732;
    //     }

    //     >li:nth-of-type(even) {
    //         background-color: #003B51;
    //     }
    // }
}
</style>